/* @group HTML Elements */

html {
	height: 99.2%; /* Ugh, this sucks. This works fine camino, but shows a 2px tall while line in Safari and 1px in Firefox. blah. */
}

body {
    height: 100%;
	font-size: 62.5%;		/* Simplifies use of ems */
	background-color: #FFF;
	margin: 0;
	padding: 0;
}

h1 {
	display: block;
}

h2 {
	font: 3em/1em Helvetica, Arial, Geneva, sans-serif;
	letter-spacing: -1px;
}

p, ul, td {
	color: #333;
	font: 1.5em Helvetica, Arial, Geneva, sans-serif;
}

a:link {
	color: #666;
	text-decoration: none;
	border-bottom: 1px dotted #666;
}

a:visited {
	color: #000;
	text-decoration: none;
	border-bottom: 1px dotted #000;
}

a:hover {
}

a:active {
	color: #333;
}

ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

/* @end */

/* @group Header */
#header {
	width: 100%;
	margin-bottom: 1.5em;
}

#header #title h1 {
    text-align: center;
	font: bold 4.5em/1em Helvetica, Arial, Geneva, sans-serif;
	letter-spacing: -3px;
	text-transform: uppercase;
	margin: 0.25em;
	border-bottom: 2px solid #333;
}

/* @group Navigation Specific */

#navigation {
	margin: 1em;
	text-align: center;
	font-size: 0.9em;
}

#navigation ul {
	display: inline;
}

#navigation ul li {
	margin-left: 0;
	margin-bottom: 0;
	padding: 2px 5px 5px 0;
	display: inline;
}

/* @end */
/* @end */

/* @group Container Specific */

#container {
	min-height: 100%; /* had to change this from 100% to get it to work... dunno why. */
    height: auto !important;
    height: 100%;
    margin: 0 auto -8em; /* the bottom margin is the negative value of the footer's height */
}

#container #image {
	width: 100%;
	text-align: center;
	float: none;
}

/* Just in case some image gets added to the site by accident */
#container #image img { 
	/* border: 2px solid #000;
	padding: 1em; */
}

#container p {
    line-height: 1.1;
}

/* @end */

/* @group Content Specific */

#content {
	margin-right: 8%;
	margin-left: 8%;
	padding: 10px;
}

/* @end */

/* @group Caption Specific */

#caption {
	font-family: Helvetica, Arial, Geneva, sans-serif;
}

#caption p {
    padding-left: 15px;
    padding-right: 30px;
}

#caption span {
  font-weight: bold;
}

/* @end */

#push {
	height: 8em; /* .push must be the same height as .footer */
}


/* @group Footer Specific */

#footer {
    height: 8em;
	background-color: #000;
	padding: 0.25em 10%;
}

#footer a {
	border-bottom: none;
}


#footer small a:link {
	color: #ccc;
	text-decoration: none;
	border-bottom: none;
}

#footer small a:visited {
	color: #ccc;
	border-bottom: none;
}

#footer small a:hover {
	background-color: #333;
	color: #ccc;
}

#footer small a:active {
	color: #ccc;
	text-decoration: none;
}

#footer p {
	color: #999;
	line-height: 1.2;
}

/* @end */